<template>
  <div class="amap-container" ref="el">
  </div>
</template>

<script setup>
//高德地图
import {ref, onMounted,onUnmounted, watch,nextTick} from 'vue'
import {ajax, util} from 'framework'
import AMapLoader from "amaploader";

window._AMapSecurityConfig = {
  serviceHost:'_AMapService'
}
const {key,plugins,version,options,AMapUI,loca,zoom}=defineProps({
  key: {
    type: String,
    default: ''
  },
  version:{
    type:String,
    default:'2.0'
  },
  plugins:{
    type:Array,
    default:[]
  },
  options:{
    type:Array,
    default:{
      enableHighAccuracy: true
    }
  },
  zoom:String,
  loca:{
    type:Boolean,
    default:false
  }
})

const emit=defineEmits(['init'])
const el = ref()
let map=null
let unloadHandler=(map)=>null
onMounted(_=>{
  console.log(plugins)
  const loadOptions={
    key: key||window._configs['AMapConfig.JSKey'],
    plugins,
    version,
    AMapUI
  }
  if (loca){
    loadOptions.Loca={
      version
    }
  }
  AMapLoader.load(loadOptions).then(AMap=>{
    if (!options.zoom){
      options.zoom=zoom||'13';
    }
    map = new AMap.Map(el.value, options)
   // const initObj={AMap,map,unload:(handler)=>unloadHandler=handler}
    emit('init',AMap,map,(handler)=>unloadHandler=handler)
  })
})
onUnmounted(_=>{
  unloadHandler(map)
  map?.destroy()
  map = null
})
</script>

<style>
.amap-container {
  width: 350px;
  height: 200px;
  display: block;
}
.amap-container .amap-logo {
  display: none !important;
}
</style>
